<template>
  <div>
    <Loadering v-if="isLoading" text="我已经在拼命加载了"></Loadering>
    <GlobalHeader :user="currentUser"></GlobalHeader>
<!--    <uploader-file action="/upload" :beforeUpload="beforeUpload" @file-uploaded="onFileUploaded">-->
<!--      <h2>点击上传</h2>-->
<!--      <template #loading>-->
<!--        <div class="spinner-border" role="status">-->
<!--          <span class="sr-only"></span>-->
<!--        </div>-->
<!--      </template>-->
<!--      <template #uploaded='dataProps'>-->
<!--        <img :src="dataProps.uploadedData.data.url" alt="" width="500">-->
<!--      </template>-->
<!--    </uploader-file>-->
    <router-view></router-view>
    <footer class="text-center py-4 text-secondary bg-light mt-6">
      <small>
        <ul class="list-inline mb-0">
          <li class="list-inline-item">专栏</li>
          <li class="list-inline-item">文档</li>
          <li class="list-inline-item">详情</li>
          <li class="list-inline-item">地址</li>
          <li class="list-inline-item">联系</li>
        </ul>
      </small>
    </footer>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted ,watch} from "vue";
import GlobalHeader from "@/components/GlobalHeader.vue";
import Loadering from "./components/Loadering.vue";
import MessageIndex from "./components/MessageIndex.vue";
import createMessage from "./hooks/createMessage";
import { useStore } from "vuex";
import {GolbalDataProps, ImageProps,ResponseType} from "./store";
import axios from "axios";
import uploaderFile from "@/components/UploaderFile.vue";
//引入专栏列表组件 以及专栏列表接口
// import ColmunList, {ColumnProps} from './components/ColmunList.vue';

// import HomeIndex from "@/views/HomeIndex.vue";

// const currentUser: UserProps = {
//   isLogin: false,
//   name: 'zhangsan'
// }
// const emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
// defineComponent配合ts来写提示更丰富
export default defineComponent({
  name: "App",
  // 引入组件，使用组件
  components: {
    GlobalHeader,
    Loadering,
    // uploaderFile
    // MessageIndex
  },
  setup() {
    const store = useStore<GolbalDataProps>();
    const currentUser = computed(() => store.state.user);
    const isLoading = computed(() => store.state.loading);
    const token = computed(() => store.state.token);
    const error = computed(()=>store.state.error)
    // 持久化登录
    onMounted(() => {
      // 此处 XXX （为获取的用户名，为XXX表示没有获取到用户名）
      // isLogin 为 false 头部显示的为登录和注册就算是 token 值保存到本地也没有意义
      // islogin 为 true 头部显示的是 你好 XXX 此时 XXX并没有获取到用户信息，前提是已经保存了token
      // 为什么islogin要取反，她的初始值为false在第一次登录之后值为true但是在刷新后就会变回初始值false
      // 辅助判断isLogin true或者false并且判断token存在
      if (!currentUser.value.isLogin && token.value) {
        // 添加一个请求头的携带token
        axios.defaults.headers.common.Authorization = ` Bearer ${token.value}`
        // 为什么如下方式不可行
        // 因为此时去执行login登录的请求没有获取到登录所需要的值
        // store.dispatch('loginAndFecth')
        // 解决方案如下：
        // const payload ={
        //   email:'111@test.com',
        //   password:'111111'
        // }
        // store.dispatch('loginAndFecth')
        // 再次获取用户信息，使 XXX 变成我们登录的用户名
        // 提交actions方法
        store.dispatch('fetchCurrentUser')
      }
      watch(()=>error.value.stateus,()=>{
        const {stateus,message}=error.value
        if(stateus && message){
          createMessage(message,'error')
        }
      })
    });
    // console.log(isLoading);

    //邮箱验证规则
    // const emailRef = reactive({
    //   val:'',  //内容
    //   error:false,  //返回一个错误信息
    //   message:''
    // })
    //失焦事件
    // const  vaildateEmail = () => {
    //   // console.log(1)
    //   if(emailRef.val.trim() === ''){
    //     emailRef.error = true
    //     emailRef.message = '邮箱不能为空'
    //   }else if(!emailReg.test(emailRef.val)){
    //     emailRef.error = true
    //     emailRef.message = '输入的邮箱格式不对'
    //   }
    // }
    // const beforeUpload = (file:File) => {
    //   const isJPG = file.type === 'image/jpeg'
    //   if(!isJPG){
    //     createMessage('上传图片只能是JPG格式','error')
    //   }
    //   return isJPG
    // }
    // const onFileUploaded = (rawData:ResponseType<ImageProps>) => {
    //   createMessage(`上传图片ID${rawData.data._id}`,'success')
    // }
    return {
      //将模板中需要使用的数据 return出去
      // list: textData,
      currentUser,
      // emailRef,
      // vaildateEmail,
      isLoading,
      error,
      // beforeUpload,
      // onFileUploaded
    };
  },
});
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
</style>
